<template>
	<view class="page-content">
		<view class="flex w-full justify-center form-wrap">
			<view class="form-content">
				<view class="form-item welcome">
					Hello，欢迎登录
				</view>
				<view class="form-item login-type">
					<view class="line-flex login-type-item" :class="acLoginType==='pwd'?'ac-login-type':''"
						@click="changeLoginType('pwd')">
						账号登录
					</view>
					<view class=" line-flex login-type-item" :class="acLoginType==='code'?'ac-login-type':''"
						@click="changeLoginType('code')">
						验证码登录
					</view>
				</view>
				<view class="form-item">
					<uv-input placeholder="请输入用户账号" border="surround" v-model="formInfo.phone"></uv-input>
				</view>
				<view class="form-item" v-if="acLoginType==='pwd'">
					<uv-input placeholder="请输入密码" border="surround" type="password"
						v-model="formInfo.password"></uv-input>
				</view>
				<view class="form-item" v-else>
					<uv-input placeholder="请输入验证码" border="surround" v-model="formInfo.smsCode">
						<template v-slot:suffix>
							<uv-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></uv-code>
							<uv-button :plain="true" color="#d49a49" @click="getCode" :text="tips" type="success"
								size="mini"></uv-button>
						</template>
					</uv-input>
				</view>
				<view class="form-item">
					<uv-button text="确定登录" :disabled="subLoading" color="#d49a49" @click="handleLoginSub"></uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
	} from 'vue';
	import {
		useUserStore
	} from '@/store/module.js';
	import {
		phoneValidate
	} from '@/utils/validate.js';
	import {
		getVerifyCode,
		getPublicKey,
		phoneLogin
	} from '@/config/api.js';
	import JSEncrypt from '@/utils/jsencrypt.js';


	const formInfo = reactive({
		mobileArea: '+86',
		phone: '',
		password: '',
		smsCode: ''
	})
	const subLoading = ref(false);
	const acLoginType = ref('pwd');
	const changeLoginType = (val) => {
		acLoginType.value = val;
	}
	const userStore = useUserStore();
	/**
	 * 验证码登录
	 */
	const uCode = ref(null)
	const tips = ref('获取验证码')
	const getCode = async () => {
		if (!uCode.value.canGetCode) {
			return
		}
		const phoneValidateTmp = phoneValidate(formInfo.phone)
		if (!phoneValidateTmp) {
			uni.$uv.toast('请输入正确手机号');
			return
		}
		const res = await getVerifyCode({
			stringParam: `+86${formInfo.phone}`
		})
		if (res.code === 100) {
			uni.$uv.toast('短信已发送');
			uCode.value.start();
		}

	}
	const codeChange = (text) => {
		tips.value = text;
	}
	const codeLoginAction = () => {
		const param = {
			mobileArea: formInfo.mobileArea,
			username: formInfo.phone,
			verifyCode: formInfo.smsCode
		};
	}
	/**
	 *	账户密码登录 
	 */
	const getPublicKeyAction = async () => {
		const res = await getPublicKey();
		uni.setStorageSync('sessionGenerateId', res.sessionGenerateId);
		const encryptor = new JSEncrypt();
		encryptor.setPublicKey(data.publicKey);
		const enPassword = encryptor.encrypt(formInfo.password);
		loginAction(enPassword);
	}

	/**
	 *	确定登录 
	 */
	const handleLoginSub = () => {
		console.log('~~~~~~~测试~~~~~')
		if (!formInfo.phone) {
			uni.$uv.toast('请输入手机号');
			return
		}
		if (!phoneValidate(formInfo.phone)) {
			uni.$uv.toast('请输入正确的手机号');
			return
		}
		if (acLoginType.value === 'pwd') {
			if (!formInfo.password) {
				uni.$uv.toast('请输入密码');
				return
			}
			getPublicKeyAction();
		} else {
			if (!formInfo.smsCode) {
				uni.$uv.toast('请输入验证码');
				return
			}
			loginAction();
		}
	}
	const loginAction = async (enPassword) => {
		const param = {
			mobileArea: formInfo.mobileArea,
			username: formInfo.phone,
		};
		if (enPassword) {
			param.enPassword = enPassword;
		} else {
			param.verifyCode = formInfo.smsCode
		}
		const res = await phoneLogin(param);
		if (res.code === 100) {
			let member = res.data || {};
			uni.setStorageSync('token',res.data.loginToken)
			const userTmp = {
				memberId: member.memberId,
				nickname: member.nickname,
				photo: member.photo,
				rankName: member.rankName,
				rankId: member.rankId,
				phone: member.phone,
				expireDate: member.expireDate,
				shopOwner: member.shopOwner,
				defaulted: member.defaulted,
				branchStoreId: member.branchStoreId,
				shopAdminId: member.shopAdminId,
				inviteCode: member.inviteCode,
				parentId: member.parentId,
				newUser: member.newUser,
				rankGrade: member.rankGrade,
				special: member.special,
				parentName: member.parentName,
				mobileArea: member.mobileArea || '+86'
			};
			userStore.setUserInfo(userTmp);
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form-wrap {
		margin-top: 200rpx;
	}

	.form-content {
		width: 550rpx;
	}

	.form-item {
		margin-top: 50rpx;
	}

	.welcome {
		font-size: 48rpx;
		font-weight: 600;
		margin-bottom: 80rpx;
		text-shadow: 8rpx 4rpx 6rpx rgba(0, 0, 0, 0.2);
		;
	}

	.login-type-item {
		width: 180rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #999;

		&:first-child {
			border-right: 2rpx solid #666;
			margin-right: 40rpx;
		}
	}

	.ac-login-type {
		color: #333;
	}
</style>